<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客文章</title>
    <!-- 引入 Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <header class="site-header">
        <h1>探索前端开发的奥秘</h1>
        <p class="post-meta">发布于 2024年1月15日 | 作者：你的名字</p>
    </header>

    <article class="post-content">
        <section class="intro">
            <p>前端开发是现代Web应用程序中不可或缺的一部分。它不仅关乎网站的外观，更涉及用户体验、性能优化和跨平台兼容性等多个方面。</p>
        </section>

        <section>
            <h2>什么是前端开发？</h2>
            <p>前端开发是创建网站或应用程序用户界面的过程。它涉及三个核心技术：</p>
            <ul>
                <li>HTML - 构建网页结构</li>
                <li>CSS - 设计视觉样式</li>
                <li>JavaScript - 实现交互功能</li>
            </ul>
        </section>

        <section>
            <h2>为什么选择前端开发？</h2>
            <blockquote>
                "前端开发让我们能够将创意转化为现实，创造出用户喜爱的产品。"
            </blockquote>
            <p>选择前端开发有很多令人兴奋的理由：</p>
            <ol>
                <li>创造性工作</li>
                <li>持续学习和成长</li>
                <li>广阔的职业发展空间</li>
            </ol>
        </section>
    </article>

    <footer class="site-footer">
        <p>感谢阅读！欢迎关注我的其他文章</p>
        <div class="social-links">
            <a href="#" class="social-link">GitHub</a>
            <a href="#" class="social-link">Twitter</a>
            <a href="#" class="social-link">LinkedIn</a>
        </div>
    </footer>
</body>
</html>